<template>
  <uni-popup ref="namecallRef" type="bottom" zindex>
    <view class="tea-box" @click.stop="closeall">
      <view class="namecall-title text-white text-xl text-center padding-top">请选择你的服务</view>
      <view class="padding posi-top">
        <view class="call-box  flex flex-direction bg-cbox justify-center padding">
          <view class="flex justify-between align-center">
            <view class="ca-left text-c3 text-xll text-c3 text-bold" style="letter-spacing: 0.4px;">
              188号
            </view>
            <view class="ca-right ">
              <text class="cuIcon-timefill"></text>
              <text class="text-c9 margin-left-xs">14:00-15:00</text>
            </view>
          </view>
          <view class="flex justify-between align-center margin-top-sm">
            <view class="ca-left text-c3 text-df text-c3">
              特级技师
            </view>
            <view class="ca-right">
              <text class="cuIcon-info text970 tit_tah"></text>
              <text class="text970 margin-left-xs">技师时间为上点时间，非到店时间</text>
            </view>
          </view>
        </view>
        
        <view class="tabsref-con padding-bottom-sm padding-top-sm">
          <tabs ref="tabsRef" :scroll="false" :list="tablist" @tabItemClick="tabSelect" marright="170rpx"
            activeWeight='700' :current="currentIndex" fontSize="36rpx" actFontSize="36rpx" barMargin="10" activeColor="#56BF7A"
            barWidth="20" activeBarColor="#56BF7A" unActi="#333"></tabs>
        </view>
        
        <view class="cen-box" :style="{height: showcscope ? lexmorH + 'px' : boxHeight}">
          <view class="content flex  xffwscope flex-wrap flexd">
            <block v-for="(item,index) in nameData" :key="index">
              <view class="c-ul flex flex-direction align-center margin-left-xs" @click="seletype(item,index)" :class="{active:seleIndex == index}">
                <view class="text-c9 text-xs padding-top-xs positiem li-w flex justify-end padding-right-xs" :class="{clolr7a:seleIndex == index}">{{item.tiem}}分钟</view>
                <view class="colorf9a margin-top-xs"><text class="text-xs">￥</text><text class="text-bold">{{item.pic}}</text></view>
                <view class="text-c3 margin-top-xxs lee-text" :class="{clolr7a:seleIndex == index}">{{item.name}}</view>
              </view>
            </block>
          </view>
        </view>
        
        <view class="flex justify-end text-c9 text-df padding-top-sm" v-if="nameData && nameData.length > 8" @click="isopen">查看所有可做项目<text class="cuIcon-right rotateStyle text-df  cscope text-c9"   :class="{'active': showcscope}"></text></view>
        
      </view>
      
      <view class="flex justify-between padding-left padding-right room-con align-center">
        <view class="boo-le text-c6">房间</view>
        <view class="boo-r flex">
          <view class="room-li flex align-center justify-center text-c3 text-lg" :class="{active:acIndex === 0}"  @click="setActive(0)">不限
            <view class="vipDay flex justify-center align-center">会员日5折</view>
          </view>
          <view class="room-li flex align-center justify-center text-c3 text-lg" :class="{active:acIndex === 1}"  @click="setActive(1)">VIP <text class="text-c9 text-sm addsan" :class="{active:acIndex === 1}">+30元</text></view>
          <view class="room-li flex align-center justify-center text-c3 text-lg" :class="{active:acIndex === 2}"  @click="setActive(2)">普通</view>
        </view>
      </view>
      
      <!-- <view class="c-title text-c6 margin-top-lg margin-bottom-lg">
        服务时间
      </view>
      <view class="time-box flex flex-wrap">
        <view class="t-li t-w" v-for="(item,index) in timeData" :key="index" :class="{active:item.selec}" @click="selceFn(item,timeData)">{{item.text}}分钟</view>
      </view>
      <view class="c-title text-c6 margin-top-lg margin-bottom-lg">
        服务项目
      </view>
      <view class="time-box flex flex-wrap">
        <view class="t-li  t-prow" v-for="(item,index) in proData" :key="index" :class="{active:item.selec}" @click="selceFn(item,proData)">{{item.text}}</view>
      </view>
      <view class="c-title text-c6 margin-top-lg margin-bottom-lg">
        房间类型
      </view>
      <view class="time-box flex flex-wrap">
        <view class="t-li  t-ttyyw" v-for="(item,index) in typeData" :key="index" :class="{active:item.selec}" @click="selceFn(item,typeData)">{{item.text}}</view>
      </view> -->
      <view class="f-btn" @click="sureBtn">
        <text>选好了</text>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, nextTick, getCurrentInstance  } from 'vue'
  import tabs from '@/components/comtabs/comtabs.vue'
  const emit = defineEmits(["confirm"])
  const showcscope = ref(null)
  const namecallRef = ref(null)
  const currentIndex = ref(0)
  const tIndex = ref(-1)
  const proIndex = ref(-1)
  const acIndex = ref(null)
  const tabsRef = ref()
  const tablist = ref([
    {
      id: 0,
      name: "按摩"
    }, {
      id: 1,
      name: "足浴"
    },
    {
      id: 2,
      name: "艾灸"
    }, {
      id: 3,
      name: "SPA"
    }
  ])
  const timeData = ref([
    {
      id : 0,
      text : '30',
      selec:false
    },
    {
      id : 1,
      text : '60',
      selec:false
    },
    {
      id : 2,
      text : '90',
      selec:false
    },
    
  ])
  
  const proData = ref([
    {
      id : 0,
      text : 'SPA',
      selec:false
    },
    {
      id : 1,
      text : '中式',
      selec:false
    },
    {
      id : 2,
      text : '足浴',
      tselec:false
    },
    {
      id : 3,
      text : '美容',
      selec:false
    }
  ])
  
  const typeData = ref([
    {
      id : 0,
      text : '不限',
      selec:false
    },
    {
      id : 1,
      text : '普通',
      selec:false
    },
    {
      id : 2,
      text : 'VIP',
      selec:false
    },
    {
      id : 0,
      text : '不限',
      selec:false
    }
  ])
  
  const nameData = ref([
    {
      id : 0,
      name : '培阳',
      pic:'218',
      tiem:60
    },
    {
      id : 1,
      name : '足浴',
      pic:'218',
      tiem:60
    },
    {
      id : 2,
      name : '艾灸',
      pic:'218',
      tiem:60
    },
    {
      id : 3,
      name : '培阳',
      pic:'218',
      tiem:60
    },
    {
      id : 4,
      name : '足浴',
      pic:'218',
      tiem:60
    },
    {
      id : 5,
      name : '温经',
      pic:'218',
      tiem:60
    },
    {
      id : 6,
      name : '足浴',
      pic:'218',
      tiem:60
    },
    {
      id : 7,
      name : '温经',
      pic:'218',
      tiem:60
    },
    {
      id : 8,
      name : '培阳',
      pic:'218',
      tiem:60
    },
   
  ])
  
  const lexmorH = ref(0)
  const opneQuery = ref<any>(null);
  onMounted(() => {
    let instance = getCurrentInstance();
    opneQuery.value = uni.createSelectorQuery().in(instance);
  })
  const boxHeight = computed(()=>{
    return nameData.value.length > 4 ? '340rpx' : '180rpx';
  })
  const isopen = () => {
    showcscope.value = !showcscope.value
    opneQuery.value.select(('.xffwscope')).boundingClientRect(); // 选择类名为my-element的元素
    // 执行查询并处理返回结果
    opneQuery.value.exec((res) => {
      if (res[0]) {
        let elementRect = res[0];
        let rpxValue = elementRect.height
        lexmorH.value = rpxValue
        console.log(lexmorH.value)
      } else {
        console.log('元素不存在或查询失败');
      }
    });
  }
  const seleIndex = ref(-1)
  const seletype = (item,index) => {
    seleIndex.value = index
  }
  
  const setActive = (index) => {
    acIndex.value = index
  }
  
  const tabSelect = (item : any, index : any) => {
    currentIndex.value = item.id
    
  }
  
  const open = () => {
    namecallRef.value.open()
    tabsRef.value.init()
  }
  
  const close = () => {
    namecallRef.value.close()
  }
  
  const selceFn = (item:any,data:any) => {
    // item.type == 'time' ? tIndex.value = index : proIndex.value = index
    if(item.selec){
      item.selec = false
    }else{
      data.forEach(item=>{
        item.selec = false
      })
      item.selec = true
    }
  }
  
  const closeall = () => {
    
  }
  
  const sureBtn = () => {
    close()
    emit('confirm',true)
  }
  
  
  
  defineExpose({ open, close })
</script>

<style lang="scss" scoped>
  .tea-box {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding-bottom: 40rpx;
    flex-shrink: 0;
    min-height: 1250rpx;
    max-height: 96vh;
    position: relative;
    .posi-top{
      margin-top: -160rpx;
    }
    .namecall-title{
      border-radius: 16rpx 16rpx 0px 0px;
      background: #56BF7A;
      height: 224rpx;
      letter-spacing: 0.4px;
      font-weight: 400;
    }
    .cuIcon-timefill{
      color: #56BF7A;
    }
    .call-w{
      
    }
    .bg-cbox{
      border-radius: 16rpx;
      background: #FFF;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    }
    .t-li{
      border: 1px solid #E1E1E1;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.28px;
      color: #666;
      margin-right: 40rpx;
      margin-bottom: 20rpx;
      &.active{
        border: 1px solid #56BF7A;
        background: rgba(86, 191, 122, 0.15);
        color: #56BF7A;
      }
    }
    .t-w{
      width: 204rpx;
      height: 80rpx;
      &:nth-child(3n){
        margin-right: 0;
      }
    }
    .t-prow{
      width: 124rpx;
      height: 124rpx;
      margin-right: 66rpx;
      &:nth-child(4n){
        margin-right: 0;
      }
    }
    .t-ttyyw{
      width: 90rpx;
      height: 90rpx;
      margin-right: 32.5rpx;
      &:nth-child(6n){
        margin-right: 0;
      }
    }
  }
  .f-btn{
    width: 654rpx;
    position: absolute;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 32px;
    border-radius: 100px;
    background: #56BF7A;
    color: #fff;
    font-weight: 400;
    text-align: center;
  }
  .text970{
    color: #FF9700;
  }
  .cen-box{
    // height: 340rpx;
    overflow: hidden;
    transition: all 0.16s ease-out;
    .c-ul{
      width:164rpx;
      height: 162rpx;
      background-color: #fff;
      border-radius: 8rpx;
      margin-bottom: 10rpx;
      // box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.07);
      border: 1px solid #F2F5FC;
      &.active{
        background-color: rgba(86, 191, 122, 0.15);
        color: #56BF7A;
        border: 1px solid #56BF7A;
      }
      .li-w{
        width: 100%;
      }
    }
  }
  .colorf9a{
    color: #56BF7A;
    font-size: 48rpx;
  }
  .lee-text{
    letter-spacing: 6rpx;
  }
  .rotateStyle {
    transform: rotate(90deg);
    display: inline-block;
    transition: all .3s linear;
  
    &.active {
      transform: rotate(-90deg);
      transition: all .3s linear;
    }
  }
  .room-con{
    .room-li{
      width: 190rpx;
      height: 72rpx;
      background-color: #FFF;
      border: 1px solid #F2F5FC;
      margin-right: 10rpx;
      position: relative;
      .addsan{
        &.active{
          color: #56BF7A;
        }
      }
      &.active{
        background-color: rgba(86, 191, 122, 0.15);
        color: #56BF7A;
        border: 1px solid #56BF7A;
      }
      .vipDay{
        width: 100rpx;
        height: 24rpx;
        border-radius: 4px 6px 6px 0px;
        background: linear-gradient(270deg, #FF7A00 0%, rgba(255, 122, 0, 0.31) 151.35%);
        letter-spacing: 0.16px;
        color: #fff;
        font-size: 19rpx;
        position: absolute;
        top: -10rpx;
        right: -3rpx;
      }
    }
  }
  .clolr7a{
    color: #56BF7A;
  }
  /* #ifdef H5 */
  .margin-left-xs{
    margin-left: 5rpx !important;
  }
  /* #endif */
</style>